<template>
	<view class="card-detail">
		<view class="top">
			<card-pack-item :data="data" showQrcode />
			<view style="margin-top: 30rpx;font-weight: 700;font-size: 30rpx;">
				请选择续卡套餐
			</view>
			<view class="card" v-for="(item,index) in pointLits" :key="index" @click="gocard(index)"  :class="[selectcard===index?'card_s':'card']">
				<view class="card_ysj">
					<view  v-if="item.zsong != ''" :class="[selectcard===index?'card_ysj_ls':'card_ysj_s']">赠送{{item.zsong}}次</view>
				</view>
				<view   :class="[selectcard===index?'card_cs_n':'card_cs']">
					<text>次数{{item.cika}}次</text>
					<text  :class="[selectcard===index?'card_cs_ss':'card_cs_s']" v-if="item.zsc != ''">+{{item.zsc}}次</text>
				</view>
				<view   v-if="item.money != ''" :class="[selectcard===index?'card_jec':'card_je']">
					￥{{item.name}}
				</view>
				<view   v-if="item.money == ''" :class="[selectcard===index?'card_jec':'card_jes']">
					￥{{item.name}}
				</view>
				<view  v-if="item.money != ''" :class="[selectcard===index?'card_hxs':'card_hx']">
					￥{{item.money}}
				</view>
			</view>
			<view style="margin-top: 600rpx;font-weight: 700;font-size: 30rpx;">
				续卡说明
			</view>
			<view style="margin-top: 30rpx;font-size: 26rpx;">
				1.续卡原卡无损坏，能正常使用
			</view>
			<view style="margin-top: 30rpx;font-size: 26rpx;">
				2.续卡后，概不退款
			</view>
			<view style="margin-top: 30rpx;font-size: 26rpx;">
				3.在这里写上续卡说明...
			</view>
			<view class="" style="margin-top: 60rpx;">
				<u-button text="确定充值" shape="circle"  @click="renew"
					color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)"></u-button>
				<!-- <button type="default">确定充值</button> -->
			</view>
		</view>


	</view>
</template>

<script>
	import cardPackItem from '@/pages/personal/card-pack/card-pack-item.vue'
	const index = require('@/api/personal/index.js')
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				data: {},
				cardno: '',
				id: 0,
				pointLits: [
					{
						id:'1',
						name:'200.00',
						cika:20,
						money:'300.00',
						zsong:20,
						zsc:20
					},
					{
						id:'2',
						name:'300.00',
						money:'400.00',
						cika:30,
						zsong:'',
						zsc: ''
					},
					{
						id:'3',
						name:'400.00',
						cika:40,
						money:'',
						zsong:'',
						zsc: ''
					},
					{
						id:'3',
						name:'400.00',
						cika:40,
						money:'',
						zsong:'',
						zsc: ''
					},{
						id:'3',
						name:'400.00',
						cika:40,
						money:'',
						zsong:'',
						zsc: ''
					},
					{
						id:'3',
						name:'400.00',
						cika:40,
						money:'',
						zsong:'',
						zsc: ''
					},
					{
						id:'3',
						name:'400.00',
						cika:40,
						money:'',
						zsong:'',
						zsc: ''
					},
					{
						id:'3',
						name:'400.00',
						cika:40,
						money:'',
						zsong:'',
						zsc: ''
					},
					{
						id:'3',
						name:'400.00',
						cika:40,
						money:'',
						zsong:'',
						zsc: ''
					},
					
				],
				selectPoint: '',
				selectcard:''
			}
		},
		onLoad(options) {
			this.cardno = options.cardno
			this.getMyCardDetail()
		},
		methods: {
			gocard(index) {
				this.selectcard = index
			},

			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
				}
			},
			// 获取我的卡包详情
			async renew() {
				let that = this
				if (that.datatime  == '') {
					uni.showToast({
						title: '请输入延期时间',
						icon: 'none'
					})
					return
				}
				if (that.order_remarks  == '') {
					uni.showToast({
						title: '请输入延期说明',
						icon: 'none'
					})
					return
				}
				let params = {
					appid: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id:this.data.id,
					venue_id:this.data.venue_id,
					price:this.data.production, //价格
					pay_method:1, //支付方式
					order_money:this.data.production, //应付
					remark:this.order_remarks, //备注
					start_date:this.data.enddate, //开始时间
					end_date:this.datatime, //结束时间
				}
				let res = await index.renew(params)
				if (res.code === 1) {
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			padding: 30rpx;
			
			
		}
		.card{
			width: 30%;
			height: 160rpx;
			border: 1rpx #2f75fa solid;
			border-radius: 10rpx;
			margin-top: 30rpx;
			float: left;
			margin-left: 16rpx;
			background-color: #ffffff;
		}
		.card_s{
			width: 30%;
			height: 160rpx;
			background-color: #2f75fa;
			border-radius: 10rpx;
			margin-top: 30rpx;
			float: left;
			margin-left: 16rpx;
			color: #ffffff !important;
		}
		
		.card_hx{
			text-decoration: line-through;
			color: #cfcfcf;
			font-size: 22rpx;
			text-align: center;
			margin-top: 5rpx;
		}
		.card_hxs{
			text-decoration: line-through;
			color: #fff;
			font-size: 22rpx;
			text-align: center;
			margin-top: 5rpx;
		}
		
		.card_ysj{
			width: 50%;
			height: 30rpx;
			color: #ffffff;
			// background-color: rgb(255, 255, 255);
			font-size: 18rpx;
			text-align: center;
			border-radius: 10rpx 0 10rpx 0;
		}
		.card_ysj_s{
			width: 100%;
			height: 30rpx;
			background-color: rgb(255, 91, 188);
			border-radius: 10rpx 0 10rpx 0;
		}
		.card_ysj_ls{
			width: 100%;
			height: 30rpx;
			background-color: rgb(255, 91, 188);
			border-radius: 10rpx 0 10rpx 0;
		}
		.card_cs{
			font-size: 26rpx;
			text-align: center;
			color: #2f75fa;
			margin-top: 5rpx;
		}
		.card_cs_n{
			font-size: 26rpx;
			text-align: center;
			color: #ffffff;
			margin-top: 5rpx;
		}
		.card_cs_s{
			color: #f75200;
		}
		.card_cs_ss{
			color: #ffffff;
		}
		.card_je{
			font-size: 36rpx;
			color: #000;
			text-align: center;
			margin-top: 5rpx;
		}
		.card_jec{
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 5rpx;
		}
		.card_jes{
			font-size: 36rpx;
			color: #f75200;
			text-align: center;
			margin-top: 5rpx;
		}
		.text-blue {
			font-size: 24rpx;
			color: #2f75fa;
			text-align: center;
		}


		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				background-color: #f3f3f3;
				padding: 40rpx 0;

				.number {
					color: #2f75fa;
					margin-bottom: 40rpx;
					font-weight: bold;
				}
			}
		}

		/deep/.u-cell-group {
			.name {
				color: #333;
				font-weight: bold;
			}

			.number {
				color: #ff4105;
			}

			.date {
				color: #ccc;
			}

			.rest {
				color: #9c9c9c;
			}

			.rest,
			.date {
				margin-top: 14rpx;
				font-size: 26rpx;
			}
		}
	}
</style>
